<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="./js/vue.min.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/qs.js"></script>
<link href="./css/antd.min.css" rel="stylesheet">
<script src="./js/moment.min.js"></script>

</head>
<body>
<div id="app">
  <p>input 元素：</p>
  <a-input v-model="message" placeholder="编辑我……"></a-input>

  <p>input 表单消息是: {{ message }}</p>
    
  <p>textarea 元素：</p>
  <a-textarea v-model="message2" placeholder="多行文本输入……"></a-textarea>

	<p>提交按鈕：</p> 
	<a-button @click="submitForm">提交</a-button>
</div>

<script>
const app = {
	el: "#app",
  data() {
    return {
    	message: '',
			message2: '菜鸟教程\r\nhttps://www.runoob.com'
  	}
  },
	methods: {
		submitForm() {
			axios({
			  method: 'post',
			  url: 'https://www.fastmock.site/mock/5127d5701151c3df91aecb676866ba45/testmock/api/testapi',
			  data: Qs.stringify({
			  	message: '',
	  			message2: '菜鸟教程\r\nhttps://www.runoob.com'
			  })
			})
			.then(function (response) {
				console.log(response);
				let data = response.data
				if(data.rc == 0) {
					alert(data.msg)
				}
			})
			.catch(function (error) {
				console.log(error);
			});
		}
	}
}

function init() {
	new Vue(app)
}
</script>
<script src="./js/antd.min.js" onload="init()"></script>
</body>
</html>